<template>
  <div class="row">
    <div class="col-md-8">
      <div class="brand_left hot_BJ">
        <div class="more-tab">
          <div> <span>活动列表</span> <span>活动日历</span></div>
          <span>跟多》</span>
        </div>
        <div class="givenchy ">
          <div class="givenchy_time identical">
            <ul class="clearfix">
              <li>时间筛选：</li>
              <li
                v-for="(item ,index) in timeD"
                :class="{'timeactive':timecur === index}"
                @click="TimeItme(item,index)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="givenchy_PX identical">
            <ul class="clearfix ">
              <li>排序：</li>
              <li
                v-for="(item,index) in pxD"
                :class="{'timeactive':hotcur === index}"
                @click="HotItme(item,index)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
        <!--  -->
        <div v-for="item in signD">
          <router-link :to="{name:'ActiveServiceDetail'}">
            <div class="givenchy_message" >
              <div class="massage_img">
                <img :src="item.img" alt="" />
              </div>
              <div class="massage_text">
                <h6 class="text-overflow">{{ item.title }}</h6>
                <p class="massage_read">
                      <span
                      ><i><img src="../../../../static/images/read.png" alt=""/></i
                      >{{ item.read }}阅读</span
                      ><span
                ><i><img src="../../../../static/images/Order.png" alt=""/></i
                >发布时间：{{ item.time }}</span
                >
                </p>
                <p>活动时间：{{ item.hdtime }}</p>
                <p class="text-overflow">活动地址：{{ item.hdaddress }}</p>
              </div>
              <div class="massage_btn">
                <button
                  type="button"
                  class="btn btn-default btn-lg btn-block"
                >
                  {{ item.tense }}</button
                >
              </div>

            </div>
          </router-link>
        </div>
        <!-- 分页 -->
          <pagination :msg="page" @refreshList="onRefresList"></pagination>
        <br>
      </div>
    </div>
    <div class="col-md-4">
      <div class="brand_right hot_BJ">
        <div class="consultation"><span>活动资讯</span><span><router-link :to="{name:'ActivityInformation'}" href="#">更多》</router-link></span></div>
        <div class="info-img-list">
          <div class="info-img-item">
            <div class="span-ra"><img src="../../../../static/images/hd_p5.png">
              <span class="text-overflow">园区高企专场培训季-系列十四</span>
            </div>
            <div><span>108次阅读</span><span>2019-04-04  17:32:08</span></div>
          </div>
          <div class="info-img-item">
            <div class="span-ra"><img src="../../../../static/images/hd_p5.png">
              <span class="text-overflow">园区高企专场培训季-系列十四</span>
            </div>
            <div><span>108次阅读</span><span>2019-04-04  17:32:08</span></div>
          </div>
          <div class="info-img-item">
            <div class="span-ra"><img src="../../../../static/images/hd_p5.png">
              <span class="text-overflow">园区高企专场培训季-系列十四</span>
            </div>
            <div><span>108次阅读</span><span>2019-04-04  17:32:08</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import pagination from '../../../views/localPage/pagination'
    export default {
        name: "Home",
      components:{pagination},
      data(){
        return{
          timecur: 0,
          hotcur: 0,
          timeD: ["不限", "最近一周", "最近一月"],
          pxD: ["时间", "热度"],
          signD: [
            {
              img: "../../../static/images/hd_p1.png",
              title: "债权路演对接会（第二期）",
              read: 473,
              time: "2019-04-09",
              hdtime: " 2019-04-24 14:00  ~  17:00",
              hdaddress: "江苏省-苏州市-工业园区",
              tense: "报名中",
              Endtense:""
            },
            {
              img: "../../../static/images/hd_p3.png",
              title: "债权路演对接会（第二期）",
              read: 473,
              time: "2019-04-09",
              hdtime: " 2019-04-24 14:00  ~  17:00",
              hdaddress: "江苏省-苏州市-工业园区",
              tense:"截止报名",
              Endtense: "截止报名"
            },
            {
              img: "../../../static/images/hd_p4.png",
              title: "债权路演对接会（第二期）",
              read: 473,
              time: "2019-04-09",
              hdtime: " 2019-04-24 14:00  ~  17:00",
              hdaddress: "江苏省-苏州市-工业园区",
              tense: "报名中",
              Endtense:""
            },
            {
              img: "../../../static/images/hd_p5.png",
              title: "债权路演对接会（第二期）",
              read: 473,
              time: "2019-04-09",
              hdtime: " 2019-04-24 14:00  ~  17:00",
              hdaddress: "江苏省-苏州市-工业园区",
              tense: "报名中",
              Endtense:""
            }
          ],
          page:{
            pagesize:4,
            total:900,
          }
        }
      },
      methods: {
        // 时间筛选
        TimeItme(item, index) {
          this.timecur = index;
        },
        // 排序
        HotItme(item, index) {
          this.hotcur = index;
        },
        onRefresList(val){
          console.log(val)
        }
      }
    }
</script>

<style scoped>
  .consultation{
    height: auto;
    display: flex;
    justify-content: space-between;
  }

  .brand_right{
    padding: 17px 10px;
  }
  .info-img-item{
    width: 300px;
    margin: 20px auto;
  }
  .info-img-item img{
    width: 100%;
  }
  .span-ra{
    position: relative;
  }
  .span-ra span{
    position: absolute;
    background:rgba(0,0,0,1);
    opacity:0.6;
    text-align: center;
    bottom: 0;
    color: #FFFFFFFF;
    display: inline-block;
    width: 100%;
  }

  .more-tab{
    display: flex;
    justify-content: space-between;
  }
  .more-tab div span{
    margin-right: 30px;
  }
  .more-tab > span{
    color:#007bff ;
  }
  .Brand_introduction{
    margin: 50px 0 30px 0;
    padding: 35px 25px;
    height: 247px;
    background-color: #ffffff;
    border: solid 1px #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 0 10px #e0e0e0;
  }
  .Brand_introduction .brand_title{
    font-size: 20px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    margin-bottom: 15px;
    color: #333333;
  }
  .brand_left,.brand_right{
    padding: 20px 10px ;
    border: solid 1px #e0e0e0;
    border-radius: 5px;
  }
  .givenchy{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 20px;
  }
  .identical li{
    float: left;
    padding: 0 10px;
    height: 30px;
  }
  .identical .timeactive{
    color: #1575f9;
  }
  .givenchy_message{
    height: 250px;
    border-bottom: 1px solid #e0e0e0;
  }
  .givenchy_message,.givenchy_message .massage_read{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .givenchy_message .massage_img{
    width: 247px;
  }
  .givenchy_message .massage_img img{
    width: 100%;
  }
  .givenchy_message .massage_text{width: calc(100% - 350px);padding: 0 20px;}
  .givenchy_message .massage_text p{
    color: #666666;
  }
  .givenchy_message .massage_text>h6{
    font-size: 20px;
    font-weight:600;
    color: #333333;
  }
  .givenchy_message .massage_read{
    font-size: 12px ;
    color: #999999;
  }
  .givenchy_message .massage_read i{
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 5px;
  }
  .givenchy_message .massage_read i img{
    width: 100%;
    height: 100%;
  }
  .givenchy_message .massage_btn{
    width: 120px;
  }
</style>
